{% extends 'base.html' %}

{% block style %}
    <link rel="stylesheet" href="../static/layui/css/layui.css"/>
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/layui/layui.js"></script>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css"/>
    <style>
        .content-container {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-top: 20px;
        }
        .input-section, .output-section {
            width: 48%;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        .input-section {
            border: 1px solid #ddd;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        .output-section {
            border: 1px solid #ddd;
            display: flex;
            flex-direction: column;
            gap: 15px;
            border-left: 2px solid #ddd;
        }
        .output-text {
            width: 100%;
            height: 400px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            padding: 10px;
            border-radius: 4px;
            overflow-y: auto;
            white-space: pre-wrap; /* 保留换行和空格 */
        }
        .layui-input {
            padding: 10px;
            border-radius: 4px;
            font-size: 14px;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        .layui-btn {
            background-color: #4CAF50;
            color: white;
            font-size: 10px;
            padding: 10px 20px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .layui-btn:hover {
            background-color: #45a049;
        }
        .layui-btn:active {
            background-color: #388e3c;
        }
        .breadcrumb {
            background-color: transparent;
            padding: 0;
            margin-bottom: 20px;
        }
        .highlight {
            text-decoration: underline wavy red; /* 红色波浪线 */
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid content-top-gap">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb my-breadcrumb">
                <li class="breadcrumb-item"><a href="/index">主页</a></li>
                <li class="breadcrumb-item active" aria-current="page">文本纠错</li>
            </ol>
        </nav>
        
        <div class="layui-row content-container">
            <!-- 输入部分 -->
            <div class="input-section">
                <h3 class="text-center">请输入文本</h3>
                <textarea class="layui-input" placeholder="请输入文本..." id="name" style="width: 100%; height: 400px;"></textarea>
                <button type="button" class="layui-btn" id="classify">修改</button>
            </div>

            <!-- 输出部分 -->
            <div class="output-section">
                <h3 class="text-center">更正后的文本</h3>
                <div class="output-text" id="correctedText" readonly></div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer;
            $(function () {
                $("#classify").click(function () {
                    var name = $("#name").val();
                    var loading = layer.msg("正在修改中", {icon: 16, shade: [0.3, "gray"], time: false});
                    if ("" == name || undefined == name) {
                        layer.msg("内容不能为空", {icon: 7});
                        return;
                    }
                    $.ajax({
                        type: 'POST',
                        url: "/correct_text",
                        dataType: 'json',
                        data: {'text': name},
                        success: function (data) {
                            layer.close(loading);
                            var correctedText = data.result;

                            // 将更正后的文本展示在右侧，并解析 HTML 标签
                            $("#correctedText").html(correctedText); // 使用 .html() 而不是 .text() 或 .val()
                            layer.msg("文本已更正", {icon: 1});
                        },
                        error: function (xhr, type) {
                            if (xhr.status == 505) {
                                layer.msg('分类失败，请查看后台', {icon: 5});
                            }
                        }
                    });
                });
            });
        });
    </script>
{% endblock %}
